<template>
  <div class="w-h-full b-map">
    <div class="toolbar" v-if="!$store.state.release.pageMetadata">
      <Tooltip content="重置地图位置信息，恢复地图初始化时的中心点和缩放级别，当在设计器中调整地图所属布局块的尺寸之后，可以通过点击此按钮，实现地图的自动适配容器" :max-width="200" placement="right">
        <Button @click="resetMap" type="primary">重置</Button>
      </Tooltip>
    </div>
    <div class="w-h-full map-container"></div>
  </div>
</template>

<script>
import PnDesigner from "@/utils/PnDesigner";
import BMapLoader from "@/utils/BMapLoader";
import bmapDefaultStyleJson from './style/bmapDefaultStyleJson.json'

export default {
  name: "BMap",
  props: {
    mapOption: {
      type: Object,
      default () {
        return PnDesigner.buildBMapOptionConfigData()
      }
    }
  },
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      BMapLoader().then(() => {

        let mapElement = this.$el.querySelector('.map-container');
        const elementID = this.$PnUtil.uuid();
        mapElement.id = elementID;
        this.map = new BMapGL.Map(elementID, {
          restrictCenter: false
        });

        this.setCenter(this.mapOption)

        // 设置地图类型
        this.setMapType(this.mapOption.mapType)
        // 设置主题
        this.setMapStyle(this.mapOption.styleJson)

        this.map.enableInertialDragging()
        this.map.enableContinuousZoom()
        this.map.enableScrollWheelZoom()
        this.map.setHeading(this.mapOption.heading)
        this.map.setTilt(this.mapOption.tilt)
        this.map.setDisplayOptions({
          skyColors: this.mapOption.skyColors
        })

        this.mapOption.dragging ? this.map.enableDragging() : this.map.disableDragging()
        this.mapOption.scrollWheelZoom ? this.map.enableScrollWheelZoom() : this.map.disableScrollWheelZoom()
        this.mapOption.doubleClickZoom ? this.map.enableDoubleClickZoom() : this.map.disableDoubleClickZoom()

        this.$emit('on-load-map-success', this.map)
      })
    },

    setCenter (mapOption) {
      if (mapOption.centerCity) {
        this.map.centerAndZoom(mapOption.centerCity, mapOption.zoom);
      }else {
        this.map.centerAndZoom(new BMapGL.Point(mapOption.center[0], mapOption.center[1]), mapOption.zoom);
      }
    },

    setMapType (mapType) {
      switch (mapType) {
        case "BMAP_NORMAL_MAP":
          this.map.setMapType(BMAP_NORMAL_MAP)
          break
        case "BMAP_SATELLITE_MAP":
          this.map.setMapType(BMAP_SATELLITE_MAP)
          break
        case "BMAP_HYBRID_MAP":
          this.map.setMapType(BMAP_HYBRID_MAP)
          break
        case "BMAP_EARTH_MAP":
          this.map.setMapType(BMAP_EARTH_MAP)
          break
      }
    },

    setMapStyle (styleJson) {
      if (styleJson) {
        this.map.setMapStyleV2({styleJson: JSON.parse(styleJson)})
      }else {
        this.map.setMapStyleV2({styleJson: bmapDefaultStyleJson})
      }
    },

    resetMap () {
      this.map.reset()
    }
  },
  computed: {},
  watch: {
    'mapOption.mapType': function (val) {
      this.setMapType(val)
    },
    'mapOption.styleJson': function (val) {
      this.setMapStyle(val)
    },
    'mapOption.center': {
      handler: function (val) {
        if (!this.mapOption.centerCity) {
          this.map.setCenter(new BMapGL.Point(val[0], val[1]))
        }
      },
      deep: true
    },
    'mapOption.centerCity': function (val) {
      val ? this.map.setCenter(val) : this.map.setCenter(new BMapGL.Point(this.mapOption.center[0], this.mapOption.center[1]))
    },
    'mapOption.zoom': function (val) {
      this.map.setZoom(val)
    },
    'mapOption.heading': function (val) {
      this.map.setHeading(val)
    },
    'mapOption.tilt': function (val) {
      this.map.setTilt(val)
    },
    'mapOption.skyColors': {
      handler: function (val) {
        this.map.setDisplayOptions({
          skyColors: val
        })
      },
      deep: true
    },
    'mapOption.dragging': function (val) {
      val ? this.map.enableDragging() : this.map.disableDragging()
    },
    'mapOption.scrollWheelZoom': function (val) {
      val ? this.map.enableScrollWheelZoom() : this.map.disableScrollWheelZoom()
    },
    'mapOption.doubleClickZoom': function (val) {
      val ? this.map.enableDoubleClickZoom() : this.map.disableDoubleClickZoom()
    }
  }
}
</script>

<style lang="less" scoped>
  .b-map {
    position: relative;
    .toolbar {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 3;
    }
    .map-container {
      z-index: 1;
    }
  }
</style>
